$(function () {
    let $count1 = +$('#doing').text();
    let $count2 = +$('#finished').text();
    //输入框提示
    $('#title').keydown(function (event) {
        let $val = $('#title').val();
        if (event.key === 'Enter') {
            if ($val == '') {
                alert('请填写此字段。');
            } else {
                let $ul1 = $('#first_ul');
                let $li = $(`<li> <input type="checkbox" class='input'><p>${$val}</p><a href="#" id="remove">-</a></li>`);
                $ul1.prepend($li);
                $count1++;
                $('#doing').text($count1)
                $('#title').val('')         //按下Enter,清除输入框内容
            }
        }
    })
    //复选框
    $('ul').on('click', 'input', function () {
        if ($(this).prop('checked')) {
            let $ul2 = $('#second_ul');
            let $li2 = $(this).closest('li');
            $ul2.prepend($li2);
            $count1--;
            $count2++;
            $('#doing').text($count1);
            $('#finished').text($count2);
        } else {
            let $ul1 = $('#first_ul');
            let $li = $(this).closest('li');
            $ul1.prepend($li);
            $count2--;
            $count1++;
            $('#doing').text($count1);
            $('#finished').text($count2);
        }
    })
    //删除按钮
    $('ul').on('click', '#remove', function () {
        if ($(this).closest('li').children('.input').prop('checked')) {
            $(this).closest('li').remove();
            $count2--;
            $('#finished').text($count2);
        } else {
            $(this).closest('li').remove();
            $count1--;
            $('#doing').text($count1);
        }
    })
    $('footer').on('click', '#clear', function () {
        $('li').remove();
    })
})